﻿@model WineStore.Models.LogOn
@{
    ViewBag.Title = "LogOn";
}
<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
<link href="../../Content/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    /* example styles for validation form demo */
    #register-form
    {
        background: url("../../Content/Images/form-fieldset.gif") repeat-x scroll left bottom #F8FDEF;
        border: 1px solid #DFDCDC;
        border-radius: 15px 15px 15px 15px;
        display: inline-block;
        margin-bottom: 10px;
        margin-left: 450px;
        margin-top: 15px;
        padding: 25px 50px 10px;
        width: 350px;
    }
    
    #register-form .fieldgroup
    {
        background: url("../../Content/Images/form-divider.gif") repeat-x scroll left top transparent;
        display: inline-block;
        padding: 8px 10px;
        width: 340px;
    }
    
    #register-form .fieldgroup label
    {
        float: left;
        padding: 15px 0 0;
        text-align: right;
        width: 110px;
    }
    
    #register-form .fieldgroup input, #register-form .fieldgroup textarea, #register-form .fieldgroup select
    {
        float: right;
        margin: 10px 0;
        height: 25px;
    }
    
    #register-form .submit
    {
        padding: 10px;
        width: 220px;
        height: 40px !important;
    }
    
    #register-form .fieldgroup label.error
    {
        color: #FB3A3A;
        display: inline-block;
        margin: 4px 0 5px 125px;
        padding: 0;
        text-align: left;
        width: 220px;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
    /**
    * Basic jQuery Validation Form Demo Code
    * Copyright Sam Deering 2012
    * Licence: http://www.jquery4u.com/license/
    */
    (function ($, W, D) {
        var JQUERY4U = {};

        JQUERY4U.UTIL =
    {
        setupFormValidation: function () {
            //form validation rules
            $("#register-form").validate({
                rules: {
                    Email: {
                        required: true,
                        email: true
                    },
                    Password: {
                        required: true,
                        minlength: 5
                    },
                    agree: "required"
                },
                messages: {
                    Password: {
                        required: "Please provide a password",
                        minlength: "Your password must be at least 5 characters long"
                    },
                    Email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                },
                submitHandler: function (form) {
                    form.submit();
                }
            });
        }
    }

        //when the dom has loaded setup form validation rules
        $(D).ready(function ($) {
            JQUERY4U.UTIL.setupFormValidation();
        });

    })(jQuery, window, document);
</script>
<!-- HTML form for validation demo -->
@using (Html.BeginForm("LogOn", "Customer", FormMethod.Post, new { enctype = "multipart/form-data", id = "register-form" }))
{ 
    <h2 style="color: Red;">
        LogOn</h2>
    <div id="form-content">
        <fieldset>
            <div class="fieldgroup">
                <label for="email">
                    Email</label>
                @Html.EditorFor(model => model.Email)
            </div>
            <div class="fieldgroup">
                <label for="password">
                    Password</label>
                @Html.PasswordFor(model => model.Password)
            </div>
            <div class="fieldgroup">
                <input style="cursor: pointer; color: Red;" type="submit" value="LogOn" class="submit" />
            </div>
        </fieldset>
    </div>
   <!-- END HTML form for validation -->
}